<template>
  <div class="search-index">
      <SearchHeader></SearchHeader>
      <section>
          <div class="search-history" v-if="searchArr.length">
              <h2>
                <i class="iconfont icon-shijian"></i>
                <span>历史搜索</span>
                <span @click="deleteStroage">清空搜索记录</span>
              </h2>
              <ul>
                <li v-for="(item,index) in searchArr" :key="index" @click="goSearchList(item)">
                    {{item}}
                </li>
              </ul>
          </div>
          <div v-else>暂无搜索记录</div>
          <!-- <div>
            <h1>推荐商品</h1>
            <Like></Like>
          </div> -->
      </section>
      <Tabbar></Tabbar>
  </div>
</template>

<script>
import SearchHeader from '@/components/search/SearchHeader.vue';
// import Like from '@/components/home/Like.vue'
import Tabbar from '@/components/common/Tabbar.vue';
import { MessageBox } from 'mint-ui';
export default {
  name:'search-index',
  data () {
    return {
      searchArr:[]
    }
  },
  components: {
    Tabbar,
    SearchHeader,
    // Like
  },
  methods: {
    deleteStroage(){
      MessageBox({
        title: '提示',
        message: '确定执行此操作?',
        showCancelButton: true
      }).then(res =>{
        if(res == 'confirm'){
          //删除本地存储
          localStorage.removeItem('searchList')
          this.searchArr = [];
        }
      })
    },
    //点击历史搜索，进入搜索结果页面
    goSearchList(item){
      this.$router.push({
          name:'Search-list',
          query:{
              key:item
          }
      });
    }
  },
  created () {
    this.searchArr = JSON.parse(localStorage.getItem('searchList')) || [];
  }
}
</script>

<style scoped>
.search-index{width: 100vw;height: 100vh;display: flex;flex-direction: column;overflow: hidden;}
section{flex: 1;overflow: hidden;background: #f5f5f5;}
.search-history h2{font-weight: 500;font-size: 0.48rem;padding: .533333rem;position: relative;}
.search-history h2 span:last-child{position: absolute;right: .533333rem;font-size: .373333rem;}
.search-history h2 i{color: #f00;padding-right: .08rem;font-size: .48rem;}
.search-history ul{padding:0 .266667rem;display: flex;flex-wrap: wrap;}
.search-history ul li{border: 1px solid #ccc;font-size: .373333rem;padding: .08rem .16rem;margin: .266667rem;}
</style>